<template>
  <div class="container" :style="'min-height: ' + docheight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="homeBanner" v-if="homeData.shop_info">
        <div class="buyBanner">
          <swiper
            :auto="true"
            :show-dots="false"
            :interval="3000"
            dots-position="center"
          >
            <swiper-item
              class="swiper-demo-img"
              v-for="(item, index) in bannerUser"
              :key="index"
            >
              <div class="bannerUser">
                <img :src="item.img + ossSrc" @click="bannerFn(item)" />
                <div class="bannerUserDes">
                  ***客户{{ item.time }}分钟前完成了下单
                </div>
              </div>
            </swiper-item>
          </swiper>
        </div>
        <img
          class="bgImg"
          :src="homeData.shop_info.shop_background_img + ossSrc"
        />
      </div>
      <div class="mainCont">
        <div class="shopMask" v-if="homeData.shop_info">
          <div class="shopMain">
            <div class="shopImg">
              <img :src="homeData.shop_info.shop_background_img + ossSrc" />
            </div>
            <div class="shopInfo">
              <div class="shopName">
                <div class="shopNameVal">
                  <span style="color: #6d94f8;">{{
                    homeData.shop_info.shop_name
                  }}</span>
                </div>
              </div>
              <div class="shopInfoUnder">
                <div class="desItem">
                  <span class="iconfont icon-24gl-phoneLoudspeaker"></span>
                  <span>{{ homeData.shop_info.shop_phone }}</span>
                </div>
                <div class="desItem">
                  <span>抖音号：</span>
                  <span>{{ homeData.shop_info.shop_dy_number }}</span>
                </div>
                <div class="desItem">
                  <span class="iconfont icon-dizhi"></span>
                  <span>{{ homeData.shop_info.shop_address }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="shopDes">{{ homeData.shop_info.shop_introduce }}</div>
          <div class="couponList">
            <div
              :class="item.is_lq == 1 ? 'couponItem isGetTag' : 'couponItem'"
              @click="getCoup(item)"
              :key="index"
              v-for="(item, index) in couponArr"
            >
              <div class="couponNei">
                <div v-if="item.is_lq == 1" class="typeTagWai">
                  <div class="typeTag">已领</div>
                </div>
                <div class="couponLeft">
                  <div class="fullVal">满{{ item.full }}元可使用</div>
                  <div class="couponTime">
                    <div class="scaleTime">
                      有效期至:{{ item.expiration_time }}
                    </div>
                  </div>
                </div>
                <div class="couponRight">
                  <div class="reduceMoney">
                    <span>¥</span>
                    <span class="reduceText">{{ item.reduce }}</span>
                  </div>
                </div>
                <div class="couponRadio radioLeft"></div>
                <!-- <div class="couponRadio radioRight"></div> -->
              </div>
            </div>
          </div>
          <van-notice-bar
            class="notice"
            left-icon="volume-o"
            color="#6d94f8"
            background="#fff"
            :text="homeData.shop_info.shop_notice"
          />
        </div>
        <div
          class="mainList"
          v-if="homeData.hot_sales_goods && homeData.hot_sales_goods.length > 0"
        >
          <div class="mainTitle">
            <span class="mainTitleName">便民服务</span>
          </div>
          <div class="cosList autoCont">
            <div
              @click="goDetail(item)"
              :class="index % 3 == 0 ? 'cosItem noLeft' : 'cosItem'"
              :key="index"
              v-for="(item, index) in homeData.hot_sales_goods"
            >
              <div class="cosImg hasBorder">
                <img :src="item.goods_image + ossSrc" />
              </div>
              <div class="cosItemInfo">
                <div class="cosName">{{ item.goods_name }}</div>
                <div class="cosDes">销量：{{ item.goods_sale }}</div>
                <div class="cosPrice minPrice">
                  <div>¥ {{ item.goods_price }}</div>
                  <div style="font-size: 0.6rem;margin-left: 0.15rem;">起</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mainList">
          <div class="mainTitle">
            <span class="mainTitleName">灯具类推荐</span>
            <!-- <span class="mainTitleDes">为您推荐灯具类推荐~</span> -->
          </div>
          <div class="cosList maxCosList">
            <div
              class="maxCosItem"
              @click="goDetail(item)"
              :key="index"
              v-for="(item, index) in oneArr"
            >
              <div class="cosImg">
                <img :src="item.goods_image + ossSrc" />
                <div class="sortNum" v-if="item.activity_name != ''">
                  {{ item.activity_name }}
                </div>
              </div>
              <div class="cosItemInfo">
                <div class="cosName">
                  {{ item.goods_name }}
                </div>
                <div class="cosDes">销量：{{ item.goods_sale }}</div>
                <div class="cosPrice">
                  <div>¥ {{ item.goods_price }}</div>
                  <div style="font-size: 0.6rem;margin-left: 0.15rem;">起</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="loadMore" v-if="oneArr.length>0">{{ loadMoreText }}</div> -->
          <nodata v-if="oneArr.length == 0" text="暂无该类商品~"></nodata>
        </div>
        <div class="mainList">
          <div class="mainTitle">
            <span class="mainTitleName">开关浴霸类推荐</span>
            <!-- <span class="mainTitleDes">为您推荐灯具类推荐~</span> -->
          </div>
          <div class="cosList maxCosList">
            <div
              class="maxCosItem"
              @click="goDetail(item)"
              :key="index"
              v-for="(item, index) in fourArr"
            >
              <div class="cosImg">
                <img :src="item.goods_image + ossSrc" />
                <div class="sortNum" v-if="item.activity_name != ''">
                  {{ item.activity_name }}
                </div>
              </div>
              <div class="cosItemInfo">
                <div class="cosName">
                  {{ item.goods_name }}
                </div>
                <div class="cosDes">销量：{{ item.goods_sale }}</div>
                <div class="cosPrice">
                  <div>¥ {{ item.goods_price }}</div>
                  <div style="font-size: 0.6rem;margin-left: 0.15rem;">起</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="loadMore" v-if="fourArr.length>0">{{ loadMoreText }}</div> -->
          <nodata v-if="fourArr.length == 0" text="暂无该类商品~"></nodata>
        </div>
      </div>
      <footcpm></footcpm>
    </div>
    <getLoad v-if="!showCont"></getLoad>
    <toast
      v-model="showToast"
      position="middle"
      width="50%"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import footcpm from "@/components/footcpm";
import { userapi, coupon, receiveCoupon, goods } from "@/http/api";
import { Swiper, SwiperItem } from "vux";
import nodata from "@/components/public/nodata";

import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
import { Toast } from "vux";

export default {
  components: {
    nodata,
    Toast,
    getLoad,
    getTimeOut,
    footcpm,
    Swiper,
    SwiperItem
  },
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      homeData: {},
      couponArr: [],
      showText: "",
      showToast: false,
      oneArr: [],
      fourArr: [],
      loadMoreText: "数据加载中~",
      last_page: 0,
      page: 1,
      per_page: 20000,
      getting: false,
      aspect: {},
      bannerUser: []
    };
  },
  props: {},
  methods: {
    getEndTime() {
      $.ajax({
        url: "https://gx.localbird.cn/Index/Check_project",
        data: {
          project_number: "XM77047"
        },
        type: "post",
        success: res => {
          console.log(res);
          if (res.data < 1) {
            alert("访问失败，请联系管理员");
          } else {
            this.getData();
            this.getGoods(2);
            this.getGoods(4);
            this.getCoupon();
            this.setUser();
          }
        }
      });
    },
    goDetail(item) {
      this.$router.push({ path: "/detail", query: { id: item.goods_id } });
    },
    getCoup(item) {
      let data = {
        coupon_id: item.coupon_id
      };
      if (!this.showLoad) {
        this.showLoad = true;
        receiveCoupon(data)
          .then(res => {
            if (res.data.code == 1) {
              this.showToast = true;
              this.showText = "领取成功";
              this.getCoupon();
            } else {
              this.showToast = true;
              this.showText = res.data.msg;
            }
            this.showLoad = false;
          })
          .catch(() => {
            this.showLoad = false;
            this.showToast = true;
            this.showText = "网络请求超时";
          });
      }
    },
    getData() {
      userapi()
        .then(res => {
          if (res.data.code == 1) {
            this.homeData = res.data.data;
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showCont = true;
          this.showTimeOut = true;
        });
    },
    getCoupon() {
      let data = {};
      coupon(data)
        .then(res => {
          if (res.data.code == 1) {
            this.couponArr = res.data.data;
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    getGoods(type) {
      let data = {
        page: this.page,
        type: type,
        per_page: this.per_page
      };
      goods(data)
        .then(res => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            if (type == 2) {
              this.oneArr = arr;
            } else if (type == 4) {
              this.fourArr = arr;
            }
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      return false;
      if (this.$route.path == "/home") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getGoods();
            }
          }
        }
      }
    },
    setUser() {
      this.bannerUser = [];
      for (let i = 1; i <= 50; i++) {
        let index = Math.round(Math.random() * 55) + 1;
        let time = Math.round(Math.random() * 56) + 3;
        this.bannerUser.push({
          img: "static/img/userImg/user" + index + ".png",
          time: time
        });
      }
      this.bannerUser = this.bannerUser.sort((a, b) => {
        return a.time - b.time;
      });
    }
  },
  mounted() {
    // window.addEventListener('scroll',this.nextfn)
  },
  created() {
    this.getEndTime();
  }
};
</script>

<style scoped lang="less">
.container {
  padding-bottom: 1.75rem;
  box-sizing: border-box;
  background-color: #edf2ff;
  .homeBanner {
    width: 100%;
    font-size: 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    .buyBanner {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      .bannerUser {
        display: flex;
        align-items: center;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        font-size: 0.6rem;
        color: #fff;
        img {
          width: 1.5rem;
          border-radius: 50%;
          margin-right: 0.75rem;
        }
      }
    }
    img {
      width: 100%;
    }
    .bgImg {
      // margin-top: -4rem;
    }
  }
  .mainCont {
    width: 100%;
    top: -2rem;
    position: relative;
    // background-color: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 0 4%;
    box-sizing: border-box;
    .shopMask {
      box-sizing: border-box;
      border-radius: 0.75rem;
      width: 100%;
      padding: 0.75rem 4%;
      background-color: #fff;
      .shopMain {
        display: flex;
        align-items: center;
        .shopImg {
          width: 4rem;
          height: 4rem;
          font-size: 0;
          border: 0.15rem solid #6d94f8;
          border-radius: 0.5rem;
          overflow: hidden;
          margin-right: 0.75rem;
          img {
            width: 100%;
          }
        }
        .shopInfo {
          width: 1rem;
          flex: 1;
          height: 4rem;
          box-sizing: border-box;
          display: flex;
          // padding-top: 0.15rem;
          flex-direction: column;
          justify-content: space-around;
          .shopName {
            font-size: 0.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .shopNameVal {
              flex: 1;
              width: 1rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: 0.75rem;
            }
          }
          .shopInfoUnder {
            color: #666;
            font-size: 0.6rem;
            .desItem {
              margin-top: 0.15rem;
              display: flex;
              align-items: center;
              .iconfont {
                margin-right: 0.25rem;
              }
            }
          }
        }
      }
      .shopDes {
        width: 100%;
        font-size: 0.6rem;
        color: #666;
        box-sizing: border-box;
        margin-top: 0.75rem;
      }
      .couponList {
        width: 100%;
        font-size: 0.6rem;
        margin: 0.5rem 0;
        box-sizing: border-box;
        // justify-content: space-between;
        overflow-x: auto;
        white-space: nowrap;
        // flex-wrap: wrap;
        .couponItem {
          width: 60%;
          display: inline-block;
          white-space: nowrap;
          border-radius: 0.25rem;
          padding: 0.25rem;
          box-sizing: border-box;
          position: relative;
          margin-right: 4%;
          background-color: #6d94f8;
          .couponNei {
            display: flex;
            background-image: linear-gradient(to right, #fef8ea, #fff);
            // background-color: #fff;
            position: relative;
            height: 2.3rem;
            box-sizing: border-box;
            overflow: hidden;
            .typeTagWai {
              font-size: 0.6rem;
              height: 2.1rem;
              line-height: 3.5rem;
              position: absolute;
              top: -1rem;
              right: -2.5rem;
              background-color: #6d94f8;
              width: 5rem;
              text-align: center;
              transform: rotate(45deg);
              color: white;
              .typeTag {
                transform: scale(0.6);
              }
            }
            .couponRadio {
              position: absolute;
              width: 0.6rem;
              height: 0.6rem;
              top: 0.85rem;
              border-radius: 50%;
              background-color: #6d94f8;
            }
            .radioLeft {
              left: -0.3rem;
            }
            .radioRight {
              right: -0.3rem;
            }
            .couponLeft {
              width: 65%;
              border-right: 0.1rem dashed #6d94f8;
              padding: 0.1rem 0.45rem;
              box-sizing: border-box;
              color: #6d94f8;
              .fullVal {
                font-size: 0.6rem;
              }
              .couponTime {
                width: 100%;
                font-size: 0.6rem;
                background-color: #6d94f8;
                color: white;
                // transform: scale(0.5);
                color: white;
                padding: 0.1rem;
                box-sizing: border-box;
                margin-top: 0.15rem;
                display: inline-block;
                border-radius: 0.1rem;
                .scaleTime {
                  transform: scale(0.7);
                  position: relative;
                  left: -0.5rem;
                }
              }
            }
            .couponRight {
              width: 35%;
              padding-right: 0.5rem;
              display: flex;
              justify-content: center;
              align-items: center;
              .reduceMoney {
                color: #6d94f8;
                display: table-cell;
                font-size: 0.7rem;
                .reduceText {
                  font-size: 1rem;
                }
              }
            }
          }
        }
        .isGetTag {
          opacity: 0.7;
        }
      }
    }
    .mainList {
      width: 100%;
      margin-top: 0.75rem;
      margin-bottom: 1.25rem;
      background-color: #fff;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      border-radius: 0.75rem;
      .mainTitle {
        display: table-cell;
        padding-bottom: 0.75rem;
        .mainTitleName {
          font-size: 0.8rem;
          font-weight: bold;
          margin-right: 0.25rem;
        }
        .mainTitleDes {
          font-size: 0.6rem;
          color: #6d94f8;
        }
      }
      .rowList {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        .rowItem {
          width: 60%;
          display: inline-block;
          white-space: nowrap;
          margin-left: 4%;
          .rowItemMain {
            width: 100%;
            display: flex;
            img {
              width: 3rem;
              border-radius: 0.25rem;
            }
            .rowItemInfo {
              width: 1rem;
              flex: 1;
              height: 3rem;
              padding: 0.05rem 0;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 0.5rem;
              .rowName {
                font-size: 0.7rem;
                font-weight: bold;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .rowDes {
                color: #999;
                font-size: 0.6rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .rowPrice {
                display: flex;
                align-items: center;
                color: #6d94f8;
                .svipTag {
                  // font-size: 0.6rem;
                  // background-color: #6d94f8;
                  // color: white;
                  // padding: 0.1rem 0.5rem;
                  // margin-right: 0.25rem;
                  // border-radius: 0.25rem;
                }
              }
            }
          }
        }
        .noLeft {
          margin-left: 0;
        }
      }
      .cosList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .cosItem,
        .maxCosItem {
          width: 30%;
          margin-left: 5%;
          margin-bottom: 0.75rem;
          .cosImg {
            width: 100%;
            position: relative;
            border-radius: 0.25rem;
            overflow: hidden;
            font-size: 0;
            .sortNum {
              position: absolute;
              padding: 0.25rem 0.5rem;
              // font-size: 0.6rem;
              left: 0;
              font-size: 0.6rem;
              top: 0;
              background-color: #6d94f8;
              color: white;
              border-radius: 0 0 0.25rem 0;
            }
            img {
              width: 100%;
            }
          }
          .cosItemInfo {
            .cosName {
              width: 100%;
              margin-top: 0.25rem;
              margin-bottom: 0.25rem;
              font-size: 0.7rem;
              font-weight: bold;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .cosDes {
              color: #999;
              font-size: 0.6rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .cosPrice {
              display: flex;
              align-items: center;
              color: #6d94f8;
              font-size: 0.8rem;
              margin-top: 0.25rem;
              .svipTag {
                // font-size: 0.6rem;
                // background-color: #6d94f8;
                // color: white;
                // padding: 0.1rem 0.5rem;
                // margin-right: 0.25rem;
                // border-radius: 0.25rem;
              }
            }
            .minPrice {
              font-size: 0.6rem;
            }
          }
        }
        .maxCosItem {
          width: 48%;
          margin-left: 0;
        }
        .noLeft {
          margin-left: 0;
        }
      }
      .maxCosList {
        justify-content: space-between;
      }
      .loadMore {
        text-align: center;
        padding: 0.75rem 0;
        font-size: 0.6rem;
        color: #6d94f8;
      }
    }
  }
}
</style>
<style>
.van-notice-bar {
  padding: 0;
  box-sizing: border-box;
}
</style>
